const noop = () => {
}

export default class touchRefresh {
  constructor({
                el,
                pullIconEl,
                refreshContainer,
                arrowIcon,
                stateTextEL,
                moveCount = 200,
                dragThreshold = 0.3,
                refreshTimeOut = 700 ,
                beforePull,
                afterPull,
                onRefresh
              }) {
    // 滚动的容器， 默认是body
    this.el = el || document // 滚动盒子

    this.pullIconEl = pullIconEl // 下拉loading Icon

    this.refreshContainer = refreshContainer

    this.pullArrow = arrowIcon //  下拉箭头dom

    this.stateTextEL = stateTextEL  // 状态信息

    this.moveCount = moveCount // 位移系数

    this.dragThreshold = dragThreshold // 临界值

    this.refreshTimeOut = refreshTimeOut // 处于刷新假死的时间

    // 触发下拉刷新前调用
    this.beforePull = beforePull || noop

    // 触发下拉刷新后调用  flag：true代表触发了刷新 flag：false代表没有触发下拉刷新只是拉下马又收回去了
    this.afterPull = afterPull || noop

    // 触发下拉刷新回调 可以用来加载数据
    this.onRefresh = onRefresh || noop

    this.dragStart = null // 开始抓取标志位

    this.percentage = 0  // 拖动量的百分比

    this.changeOneTimeFlag = 0;// 修改dom只执行1次标志位

    this.joinRefreshFlag = null;// 进入下拉刷新状态标志位

    this.refreshFlag = 0;// 下拉刷新执行是控制页面假死标志位


    if (refreshContainer) {
      this.bindEvent()
    }
  }

  touchStart(event) {

    if (this.refreshFlag) {
      event.preventDefault();
      return;
    }

    event = event.touches[0];
    this.dragStart = event.clientY;

    this.refreshContainer.style.webkitTransition = 'none';

    this.pullIconEl.style.display = "none"
    //this.pullIconEl.classList.add('none');

    this.pullArrow.className = ""

  }

  touchMove(event) {

    if (this.dragStart === null) {
      return;
    }

    if (this.refreshFlag) {
      event.preventDefault();
      return;
    }

    var target = event.touches[0];

    this.percentage = (this.dragStart - target.clientY) / window.screen.height;

    // 当且紧当scrolltop是0且往下滚动时才触发
    const scrollTop = this.getScrollTop()

    if (document.body.scrollTop == 0) {
      if (this.percentage < 0) {
        event.preventDefault();
        if (!this.changeOneTimeFlag) {
          this.pullArrow.style.display = "inline-block"
          this.beforePull();
          this.changeOneTimeFlag = 1;
        }

        var translateX = -this.percentage * this.moveCount; // 向下滑，改变 refreshContainer 的 trasnsformY

        this.joinRefreshFlag = true;
        /*
        *  下拉滑动到临界值才触发onrefresh
        * */
        if (Math.abs(this.percentage) > this.dragThreshold) {
          /*this.setState({
              stateText: '释放刷新'
          });*/
          this.stateTextEL.innerHTML = '释放刷新'
          this.pullArrow.className = "up"
        } else {
          /*this.setState({
              stateText: '下拉刷新'
          });*/
          this.stateTextEL.innerHTML = '下拉刷新'
          this.pullArrow.className = "down"
        }
        /*
        * px 可以扩展为 rem
        * **/
        console.log(3333, translateX)
        this.refreshContainer.style.webkitTransform = 'translate3d(0,' + translateX + 'px,0)';
      } else {
        if (this.joinRefreshFlag == null) {
          this.joinRefreshFlag = false;
        }
      }
    } else {
      if (this.joinRefreshFlag == null) {
        this.joinRefreshFlag = false;
      }
    }
  }

  touchEnd() {
    if (this.percentage === 0) {
      return;
    }

    if (this.refreshFlag) {
      event.preventDefault(); // 阻止原生滚动，refresh Bar刷新停滞期间防止触发往上滚动
      return;
    }

    if (Math.abs(this.percentage) > this.dragThreshold && this.joinRefreshFlag) {

      this.onRefresh()

      this.refreshContainer.style.webkitTransition = '330ms';

      this.stateTextEL.innerHTML = '正在刷新..'

      //this.pullIcon.classList.remove('none');
      this.pullIconEl.style.display = "inline-block"
      this.pullArrow.style.display = "none"


      this.refreshContainer.style.webkitTransform = 'translate3d(0,' + 43 + 'px,0)';

      // 进入下拉刷新状态
      this.refreshFlag = 1;

      setTimeout(() => {

        this.stateTextEL.innerHTML = '刷新成功'

        this.pullIconEl.style.display = "none"
        //this.pullIcon.classList.add('none');
        this.refreshContainer.style.webkitTransform = 'translate3d(0,0,0)';

        setTimeout(() => {
          this.afterPull(1);
          // 重置标志位
          this.refreshFlag = 0;

          //this.stateTextEL.innerHTML = ""

        }, 300);

      }, this.refreshTimeOut);
    } else {

      if (this.joinRefreshFlag) {
        this.refreshFlag = 1;
        this.refreshContainer.style.webkitTransition = '330ms';
        this.refreshContainer.style.webkitTransform = 'translate3d(0,0,0)';

        setTimeout(() => {
          this.afterPull();
          // 重置标志位
          this.refreshFlag = 0;
        }, 300);
      }
    }

    // 重置changeOneTimeFlag
    this.changeOneTimeFlag = 0;

    // 重置joinRefreshFlag
    this.joinRefreshFlag = null;

    // 重置percentage
    this.dragStart = null;


    // 重置percentage
    this.percentage = 0;
  }

  // 获取滚动条当前的位置
  getScrollTop() {
    let scrollTop = 0;
    if (this.el.nodeName === "#document") {
      if (document.documentElement && document.documentElement.scrollTop) {
        scrollTop = document.documentElement.scrollTop;
      } else if (document.body) {
        scrollTop = document.body.scrollTop;
      }
      return scrollTop;
    }
    else {
      console.log(this.el.scrollTop)
      return this.el.scrollTop // 测试ok
    }

  }

  /*
  passive http://www.cnblogs.com/ziyunfei/p/5545439.html
  *   引入自 <https://blog.csdn.net/zl102973720/article/details/78762108>
  * passive 默认为true, 浏览器为了让页面滚动效果更好，会忽略 touch 事件的 even.preventDefault；设为false 可在touch事件阻止原生原生滚动
   */
  bindEvent() {
    this.refreshContainer.addEventListener('touchstart', this.touchStart.bind(this), {passive: false});
    this.refreshContainer.addEventListener('touchmove', this.touchMove.bind(this), {passive: false});
    this.refreshContainer.addEventListener('touchend', this.touchEnd.bind(this), {passive: false});
  }

  unBindEvent() {
    this.refreshContainer.removeEventListener('touchstart', this.touchStart.bind(this), {passive: false});
    this.refreshContainer.removeEventListener('touchmove', this.touchMove.bind(this), {passive: false});
    this.refreshContainer.removeEventListener('touchend', this.touchEnd.bind(this), {passive: false});
  }
}
